<template>
  <div class="wrapper">
    <table class="w-100  ur-table" border="1" style="border: 1px solid #e4e4e4">
      <tr height="50" >
        <td class="px-2 140 text-right">* 旧密码：</td>
        <td class="p-2">
          <el-tooltip :content="errors.first('oldPwd')" :value="errors.has('oldPwd')" :manual="true">
            <el-input type="password" class="w-100" size="small" v-model="user.oldPwd" :class="{'is-error':errors.has('oldPwd')}" v-validate="'required'" name="oldPwd"></el-input>
          </el-tooltip>
        </td>
      </tr>
      <tr height="50" >
        <td class="px-2 140 text-right">* 新密码：</td>
        <td class="p-2">
          <el-tooltip :content="errors.first('newPwd')" :value="errors.has('newPwd')" :manual="true">
            <el-input type="password" class="w-100" size="small" v-model="user.newPwd" @blur="validate('newPwd')" :class="{'is-error':errors.has('newPwd')}" name="newPwd"></el-input>
          </el-tooltip>
        </td>
      </tr>
      <tr height="50" >
        <td class="px-2 140 text-right">* 确认新密码：</td>
        <td class="p-2">
          <el-tooltip :content="errors.first('confirmPwd')" :value="errors.has('confirmPwd')" :manual="true">
            <el-input type="password" class="w-100" size="small" v-model="user.confirmPwd" @blur="validate('confirmPwd')" :class="{'is-error':errors.has('confirmPwd')}"  name="confirmPwd"></el-input>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <div class="mt-3 text-center">
      <el-button class="ur-btn ur-btn-primary-large" @click="savePwd"><i class="iconfont icon-queding"></i>确定</el-button>
      <el-button class="ur-btn ur-btn-primary-large" @click="close"><i class="iconfont icon-close1"></i>取消</el-button>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'

  export default {
    components: {},
    props: {
      type:''
    },
    data() {
      return {
        user:{oldPwd:'',newPwd:'',confirmPwd:''}
      }
    },
    watch: {},
    computed: {},
    methods: {
      validate(value){
        let regex = new RegExp('^(?![a-zA-Z]+$)(?![0-9]+$)(?![\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,30}$')
        if(value=='confirmPwd'){
          if (this.$validator.errors.has('confirmPwd')) {
            this.$validator.errors.remove('confirmPwd')
          }
          if (this.user.confirmPwd != this.user.newPwd||this.user.confirmPwd=='') {
            this.$validator.errors.add({
              field: 'confirmPwd',
              msg: '与新密码输入不一致'
            })
            return false
          }else {
            this.$validator.errors.remove('confirmPwd')
            return true
          }
        }else if(value=='newPwd'){
          if (this.$validator.errors.has('newPwd')) {
            this.$validator.errors.remove('newPwd')
          }
          if ((this.user.newPwd==''||this.user.newPwd == this.user.oldPwd)) {
            this.$validator.errors.add({
              field: 'newPwd',
              msg: '新旧密码不能相同'
            })
            return false
          }else if(!regex.test(this.user.newPwd.trim())){
            this.$validator.errors.add({
              field: 'newPwd',
              msg: '密码长度8到12位，由字母、数字、特殊字符两种以上组成'
            })
            return false
          }else {
            this.$validator.errors.remove('newPwd')
            return true
          }
        }
      },
      savePwd(){
        this.$validator.validateAll().then((res) => {
          if (!res||!this.validate('newPwd')||!this.validate('confirmPwd')) return
          let url=''
          if(this.type=='loginPwd'){//登录密码
            url='/User/ModifyPassword'
          }else{//一键全开关操作密码
            url='/ControlPassword/ModifySystem'
          }
          api.fetchSimple(url,this.user)
            .then(r=>{
              if(r!=''){
                this.$message.success({showClose: true, message: '修改成功'})
                this.close()
              }
            })
        })
      },
      close(){
        this.$emit('closeEditPwd',false)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
